<template>
    <div>
    <el-page-header  @back="$router.back()" />

    <el-card v-if="detail && afterSale" class="mt-4">
      <template #header></template>
      
     <div class="after-sale-detail">
    <!-- 退款状态 -->
    <div class="refund-status">
      <h2>退款状态：{{ refundStatusText[afterSale.status] }}</h2>
      <el-tag type="success" v-if="afterSale.status === 3">退款完成，订单全额已原路退还给顾客</el-tag>
    </div>

    <!-- 信息区块 -->
    <el-row :gutter="20" class="info-blocks">
      <el-col :span="6">
        <el-card>
          <div>退款编号：{{ detail.refundNo }}</div>
          <div>退款金额：<span style="color:red;">￥{{ detail.refundAmount }}</span></div>
          <div>订单编号：{{ detail.orderNo }}</div>
          <div>商品名称：{{ detail.productName }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>买家昵称：{{ detail.buyer.name }}</div>
          <div>手机号：{{ detail.buyer.phone }}</div>
          <div>使用设备：{{ detail.buyer.device }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>店铺名称：{{ detail.seller.name }}</div>
          <div>联系方式：{{ detail.seller.phone }}</div>
          <div>详细地址：{{ detail.seller.address }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>配送方式：{{ detail.delivery.type }}</div>
          <div>配送员：{{ detail.delivery.staff }}</div>
          <div>收货地址：{{ detail.delivery.address }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 协商历史 -->
    <div class="history-title">协商历史</div>
    <el-row :gutter="20" class="history-list">
      <el-col :span="8" v-for="item in detail.history" :key="item.time + item.operatorName">
        <el-card>
          <div class="history-header">
            <el-avatar :src="item.operatorAvatar" v-if="item.operatorAvatar" />
            <span>{{ item.operatorName }}</span>
            <span class="history-time">{{ item.time }}</span>
          </div>
          <div v-if="item.action === 1">顾客发起了退款申请</div>
          <div v-else-if="item.action === 2">商家同意退款</div>
          <div v-else-if="item.action === 3">商家拒绝退款</div>
          <div v-else-if="item.action === 4">退款成功</div>
          <div v-if="item.reason">退款原因：{{ item.reason }}</div>
          <div v-if="item.extra">补充说明：{{ item.extra }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  





    </el-card>

    <el-empty v-else description="加载中…" />
  </div>
</template>


<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOrderDetail, getAfterSaleByOrderId } from '@/api/order'
const refundStatusText = {
  1: '待商家退款',
  2: '商家拒绝退款',
  3: '商家成功退款'
}

/* 路由参数 */
const route = useRoute()
const orderId = ref(route.params.id)   // 改名为 orderId 更清晰语义

/* 数据状态 */
const detail     = ref(null)
const afterSale  = ref(null)
const loading    = ref(false)
const errorMsg   = ref('')

/* 拉取订单详情 */
async function fetchDetail(id) {
  try {
    const resp = await getOrderDetail(id)
    detail.value = resp.data
  } catch (err) {
    errorMsg.value = err?.msg || '加载订单详情失败'
    ElMessage.error(errorMsg.value)
  }
}

/* 拉取售后详情 */
async function fetchAfterSale(id) {
  try {
    const resp = await getAfterSaleByOrderId(id)
    afterSale.value = resp.data
  } catch (err) {
    errorMsg.value = err?.msg || '加载售后详情失败'
    ElMessage.error(errorMsg.value)
  }
}

/* 首次进入页面 */
onMounted(async () => {
  loading.value = true
  detail.value = null
  afterSale.value = null
  errorMsg.value = ''

  try {
    await fetchDetail(orderId.value)
    await nextTick() // 等 DOM 更新后再拉售后，防止 transition 动画未完成
    await fetchAfterSale(orderId.value)
  } catch (err) {
    // 错误已在各自函数中处理
  } finally {
    loading.value = false
  }
})

</script>